<template>
  <van-image :src="BackImage" fit="cover" />
  <van-overlay class-name="overlaystyle" :show="true" z-index="10" lock-scroll>
    <van-cell-group inset>
      <van-cell>
        <van-row justify="center">
          <van-col span="5">
            <van-image
              round
              fit="cover"
              :src="useravatar"
              width="4rem"
              height="4rem"
            />
          </van-col>
          <van-col
            :class="['usernamestyle', { 'vip-color': userrole === 'vip' }]"
            offset="1"
          >
            {{ username }}
          </van-col>
          <van-col offset="1">
            <van-tag
              v-if="userrole === 'vip'"
              type="primary"
              color="black"
              text-color="gold"
              round
              style="font-style: italic"
              >VIP</van-tag
            >
          </van-col>
        </van-row>
      </van-cell>
      <van-cell center="true" size="large">
        <van-row justify="center">
          <van-col span="8">
            <h3 @click="SeeMyPost">我的帖子</h3>
          </van-col>
          <van-col span="8">
            <h3 @click="SeeMyComment">我的评论</h3>
          </van-col>
        </van-row>
        <van-row justify="center">
          <van-col span="8">
            <h3 @click="AuthUser">身份认证</h3>
          </van-col>
          <van-col span="8">
            <h3 @click="LoginOut">退出登录</h3>
          </van-col>
        </van-row>

        <van-row justify="center">
          <van-col span="8">
            <h3 @click="SeeMyAnonname">匿名昵称</h3>
          </van-col>
          <van-col span="8">
            <h3 @click="ChangeInfo">更改信息</h3>
          </van-col>
        </van-row>
        <van-row justify="center">
          <van-col span="8">
            <h3 @click="UserAgree">用户协议</h3>
          </van-col>
          <van-col span="8">
            <h3 @click="CommunityNorm">论坛规范</h3>
          </van-col>
        </van-row>
      </van-cell>
    </van-cell-group>

    <van-tabbar v-model="activeName" @change="OnchangeTab">
      <van-tabbar-item name="" icon="wap-home-o" to="">主页</van-tabbar-item>
      <van-tabbar-item name="search" icon="search">搜索</van-tabbar-item>
      <van-tabbar-item name="putout" icon="add">发布</van-tabbar-item>
      <van-tabbar-item name="user" icon="user-o">个人中心</van-tabbar-item>
    </van-tabbar>
  </van-overlay>
</template>

<script>
import router from "@/router";
import { ref } from "vue";
import MyAxios from "@/plugins/MyAxios";
import { showConfirmDialog, showNotify, showToast } from "vant";
import store from "@/store";

export default {
  setup() {
    const Logining = ref(false);
    const backPath = ref(store.state.backedPath);
    const username = ref("");
    const useravatar = ref("");
    const userpoints = ref(0);
    const issign = ref(0);
    const userrole = ref("");

    const BackImage = ref("/User1.jpg");
    MyAxios.get("/user/get/login").then((res) => {
      const { code } = res;
      if (code == 0) {
        Logining.value = true;
      } else {
        router.push({
          path: "/login", // 假设你的路由路径是 /home, /about 这样的
        });
      }
      const { userName, userAvatar, userPoints, isSign, userRole } = res.data;
      if (userAvatar == null) {
        useravatar.value = store.state.anonImg;
      } else {
        useravatar.value =
          "http://" + backPath.value + "/api/userimages/" + userAvatar;
      }
      username.value = userName;
      userpoints.value = userPoints;
      issign.value = isSign;
      if (userRole != "") {
        userrole.value = userRole;
      }
      if (userRole == "vip") {
        BackImage.value = "/VIP1.jpg";
      }
    });

    const name = ref("UserCenter");
    const activeName = ref("user");

    const OnchangeTab = (name) => {
      router.push({
        path: `/${name}`, // 假设你的路由路径是 /home, /about 这样的
        query: { name: name }, // query 参数应该是一个对象
      });
    };
    const SeeMyPost = () => {
      router.push({
        path: "/mypost", // 假设你的路由路径是 /home, /about 这样的
      });
    };

    const SeeMyComment = () => {
      router.push({
        path: "/mycomment", // 假设你的路由路径是 /home, /about 这样的
      });
    };

    const ChangeInfo = () => {
      router.push({
        path: "/changeinfo",
      });
    };

    const SeeMyAnonname = () => {
      router.push({
        path: "/myanonname", // 假设你的路由路径是 /home, /about 这样的
      });
    };

    const AuthUser = () => {
      MyAxios.get("/authuser/findAuthInfo").then((res) => {
        const { code } = res;
        if (code == 0) {
          const isAuth = res.data;
          if (isAuth == 0) {
            showToast(
              { type: "success", message: "您已提交认证信息，审核中" },
              2000
            );
          } else if (isAuth == 1) {
            showToast({ type: "success", message: "已认证" }, 2000);
          }
        } else {
          router.push({
            path: "/authuser", // 假设你的路由路径是 /home, /about 这样的
          });
        }
      });
    };

    const LoginOut = () => {
      showConfirmDialog({
        title: "退出登录",
      })
        .then(() => {
          // on confirm
          if (Logining.value) {
            MyAxios.post("/user/logout").then((res) => {
              showNotify({ type: "success", message: "注销成功" });
              location.reload();
            });
          }
        })
        .catch(() => {
          return;
        });
    };

    const CommunityNorm = () => {
      router.push({
        path: "/ComNorms",
      });
    };

    const UserAgree = () => {
      router.push({
        path: "/useragree",
      });
    };

    return {
      name,
      activeName,
      SeeMyPost,
      OnchangeTab,
      SeeMyComment,
      ChangeInfo,
      SeeMyAnonname,
      CommunityNorm,
      username,
      useravatar,
      userpoints,
      issign,
      AuthUser,
      LoginOut,
      UserAgree,
      userrole,
      BackImage,
    };
  },
};
</script>

<style scoped>
.overlaystyle {
  --van-overlay-background: rgba(0, 0, 0, 0.2);
}

.usernamestyle {
  font-size: 30px;
  line-height: 1.5;
  color: #394968;
}
.vip-color {
  color: transparent;
  background: linear-gradient(to right, red, orange);
  -webkit-background-clip: text; /* 将背景裁剪为文本区域 */
  -webkit-text-fill-color: transparent; /* 设置文本填充颜色为透明 */
}
</style>
